<!-- 字典设置 -->
<template>
    <div>
      <div class="head">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/Dictionary' }">论坛管理</el-breadcrumb-item>
          <el-breadcrumb-item>评论审核</el-breadcrumb-item>
        </el-breadcrumb>
      </div> 
      <div class="content">
        <el-card>
          <div slot="header" class="dictionaryCardTitle">
            <p style="width:80px;text-align: center;">字典设置</p>
            <div class="dictiomarySelectDiv">
              <div class="selectName" style="margin-left:5px;"><p style="text-align: center;">字典名称</p><el-input placeholder="请输入字典名称"></el-input></div>
              <div class="selectName"><p style="text-align: center;">字典类型</p><el-input placeholder="请输入字典类型"></el-input></div>
              <div class="selectName">
                <p style="text-align: center;">字典状态</p>
                <el-select v-model="dValue" placeholder="字典状态" style="margin-left:10px;">
                  <el-option label="正常" value="shanghai"></el-option>
                  <el-option label="异常" value="beijing"></el-option>
                </el-select>
              </div>
              <div class="selectName">
                <p style="text-align: center;width: 90px;">创建时间</p>
                <el-date-picker  v-model="createTime" placeholder="选择时间" style="width: 100%;"></el-date-picker>
              </div>
              <div class="selectButton">
                <el-button type="primary" icon="el-icon-search" circle></el-button>
              </div>
            </div>
          </div>
          <div class="tableView">
            <el-table :data="dicData" border>
              <el-table-column label="字典编号" prop="id"></el-table-column>
              <el-table-column label="字典名称" prop="name"></el-table-column>
              <el-table-column label="字典类型" prop="type"></el-table-column>
              <el-table-column label="状态">
                <div slot-scope="scope">
                  <el-tag type="success">正常</el-tag>
                </div>
              </el-table-column>
              <el-table-column label="备注">
              </el-table-column>
              <el-table-column label="创建时间"></el-table-column>
              <el-table-column label="操作">
                  <div slot-scope="scope">
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                  </div>
              </el-table-column>
            </el-table>
            <el-pagination style="margin-top:20px;"
               background
               layout="prev, pager, next"
               :total="totalPage">
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
  </template>
  <script>
      
  export default({
    methods: {
      name() {
        
      },
    },
    data() {
      return {
        dicData: [{
          id:'1',
          name:"用户性别",
          type:"xy_user_sex"
        }],
      totalPage:10,
      dValue:"",
      createTime:""
      }
    },
  })
  </script>
      
<style scoped>
.dictiomarySelectDiv .el-input{
  min-width: 140px;
  margin-left: 10px;
}
.dictiomarySelectDiv .el-select{
  min-width: 160px;
}
.dictionaryCardTitle{
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  font-weight: 600;
}
.dictiomarySelectDiv{
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.selectName{
  display: flex;
  margin-left: 8px;
  align-items: center;
}
.selectName p{
  min-width: 70px;
}
.tableView{
  min-width: 100%;
}
.selectButton{
  margin-left: 10px;
}
  </style>